<template>
  <view class="bg-gray padding" style="min-height:100vh">
    <view v-if="orderInfo" class="padding bg-white" style="border-radius:4px">
      <view class="text-center">
        <image :src="orderInfo.qrcode" mode="aspectFit" style="width:240px;height:240px;"></image>
      </view>
      <view class="margin-top">
        <view class="padding-tb-xs">
          <text class="row-label">订单号：</text>
          <text class="row-value">{{orderInfo.orderNO}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">订单状态：</text>
          <text class="row-value">{{getStatusAsString(orderInfo.orderStatus)}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">患者姓名：</text>
          <text class="row-value">{{orderInfo.uname}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">患者性别：</text>
          <text class="row-value">{{getSexAsString(orderInfo.sex)}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">检测项目：</text>
          <text class="row-value">{{orderInfo.item_name}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">核酸类别：</text>
          <text class="row-value">{{orderInfo.category_name}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">预约日期：</text>
          <text class="row-value">{{orderInfo.orderDate}}</text>
        </view>
        <view class="padding-tb-xs">
          <text class="row-label">申请日期：</text>
          <text class="row-value">{{orderInfo.applyDate}}</text>
        </view>
      </view>
    </view>

    <cu-bar></cu-bar>
  </view>
</template>

<script>
import moment from 'moment'

export default {
  data() {
    return {
      orderInfo: null,
      orderStatusOpts: [
        { label: '预约中', value: '0'},
        { label: '线上已缴费', value: '1'},
        { label: '线下已缴费', value: '2'},
        { label: '已采样', value: '3'},
        { label: '退费作废', value: '4'},
        // { label: '超期作废', value: ''},
        { label: '无法采集', value: '5'},
        { label: '超期作废', value: '6'},
      ],
      sexOpts: [
        { label: '男', value: '1'},
        { label: '女', value: '2'},
      ],
    }
  },
  onLoad(opt) {
    const { id } = opt
    if (id) {
      this.getOrderData(id)
    }
  },
  methods: {
    getOrderData(orderId) {
      this.$http({
        url: `/api/Book/QueryByOrder?orders_id=${orderId}`,
        method: 'POST',
        success: (res) => {
          if (res.success) {
            const {
              appo_date, //: "2022-05-13T00:00:00"
              idnum, //: "130282199207255111"
              item_name, //: "新冠病毒核酸检测（常规）"
              type_name, 
              patient_name, //: "孟李辉"
              price, //: 19.7
              ins_time, 
              range, //: "08:00-09:00"
              sex, //: "1"
              status, //: "0"
              qrcode,
              appo_id,
              orders_id,
              medicare, // 是否医保缴费
            } = res.data

            this.orderInfo = {
              orderNO: orders_id,
              orders_id,
              orderStatus: status,
              status,
              uname: patient_name,
              price,
              sex,
              // age: 30,
              // keshi: '核酸检测门诊',
              // category: '0', // 
              item_name,
              category_name: type_name,
              // 预约日期
              orderDate: `${appo_date.substring(0,10)} ${range}`,
              // 申请日期
              applyDate: moment(ins_time).format('YYYY-MM-DD HH:mm'),
              qrcode: `data:image/png;base64,${qrcode}`,
              medicare,
            }
          }
        }
      })
    },
    // onRefreshOrder(orderId) {
    //   this.$http({
    //     url: `/api/Bank/Status?orders_id=${orderId}`,
    //     method: 'POST',
    //     success: (res) => {
    //       if (res.success) {
            
    //       } else {
    //         // uni.showToast({
    //         //   title: res.msg,
    //         //   icon: 'none'
    //         // })
    //       }

    //       this.getOrderData(orderId)
    //     }
    //   })
    // },
    getStatusAsString(val) {
      return (this.orderStatusOpts.find(x => x.value == val) || {}).label
    },
    getSexAsString(val) {
      return (this.sexOpts.find(x => x.value == val) || {}).label
    },
    getCategoryAsString(val) {
      return (this.categoryOpts.find(x => x.value == val) || {}).label
    },
  }
}
</script>

<style scoped>

</style>